<template>
  <div class="mainCenterFather">
    <div class="topPart">
      <span class="topTitle">关键数据</span>
    </div>
    <div class="dataCircleContainer">
      <div class="dataCircle" v-for="(item,index) in num" :key="index">
        <div class="numText">
          <div class="num" style="margin-bottom:5px;font-size:20px;">{{item.total}}</div>
          <div class="text" style="font-size:12px;">{{item.name}}</div>
        </div>
      </div>
    </div>
    <div class="bottomPart">
      <span class="bottomTitle">简历分析</span>
    </div>
    <!--环形图-->
    <div class="circleCharts">
      <main-left-chart></main-left-chart>
      <main-right-chart></main-right-chart>
    </div>
  </div>
</template>

<script>
import mainLeftChart from './mainLeftChart.vue'
import mainRightChart from './mainRightChart.vue'
export default {
  name: "mainCenterFather",
  components:{
    mainLeftChart,
    mainRightChart
  },
  data() {
    return {
      num:[
        {name:'企业数',total:51},
        {name:'职位数',total:346},
        {name:'需求量',total:1589},
        {name:'浏览器',total:2138},
        {name:'简历投递',total:300}
      ]
    };
  },

  methods: {},
};
</script>

<style scoped lang="scss">
.mainCenterFather {
  width: 100%;
  background-color: #051238;
  position: relative;
  //顶部标题
  .topPart {
    position: absolute;
    left: 50%;
    top: 40px;
    transform: translateX(-50%);
    background: url("../../../assets/数据屏/关键数据@2x.png") no-repeat;
    background-size: contain;
    background-position: center center;
    width: 80%;
    height: 45px;
    .topTitle {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      font-size: 20px;
      font-weight: 600;
      color: #ffffff;
    }
  }
  //底部标题
  .bottomPart{
    position: absolute;
    left: 50%;
    top: 280px;
    transform: translateX(-50%);
    background: url("../../../assets/数据屏/关键数据@2x.png") no-repeat;
    background-size: contain;
    background-position: center center;
    width: 80%;
    height: 45px;
    .bottomTitle {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      font-size: 20px;
      font-weight: 600;
      bottom: #ffffff;
    }
  }
  //数据圈
  .dataCircleContainer{
    width: 100%;
    position: absolute;
    top: 90px;
    display: flex;
    justify-content: space-between;
    .dataCircle{
      width: 18%;
      height: 190px;
      background: url("../../../assets/数据屏/数据圈@2x.png") no-repeat;
    background-size: contain;
    background-position: center center;
    position: relative;
    .numText{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      font-weight: 600;
    }
    }
  }
  //底部环形图
  .circleCharts{
    position: absolute;
    bottom:-600px;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  
}
</style>
